/*
 * @Author: yangrongxin
 * @Date: 2021-08-12 17:46:29
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-28 10:17:52
 */
import { useState } from 'react';
import { View, Text } from '@tarojs/components';
import { AtTabs, AtTabsPane } from 'taro-ui';
import { useRouter } from '@tarojs/taro';
import { TEST_STATUS } from './dataDictionary';
import { AssessmentList } from './components';
import styles from './index.module.less';

const MyAssessment = () => {
  const {
    params: {
      waitSuccessEvaluation: propsWaitSuccessEvaluation = '0', // 待测评的数据
    },
  } = useRouter();
  const [current, setCurrent] = useState<number>(0);
  const [waitSuccessEvaluation, setWaitSuccessEvaluation] = useState<string>(propsWaitSuccessEvaluation);

  /* 切换当前的选中标签页 */
  const handleClick = (value) => {
    setCurrent(value);
  };

  const tabList = [
    {
      title: '待测评',
    },
    {
      title: '待支付',
    },
    {
      title: '已测评',
    },
    {
      title: '已过期',
    },
  ];

  // 更新当前的小红点提示信息
  const updateInfo = (res) => {
    const {
      waitEvaluationNum,
      // total,
    } = res;
    setWaitSuccessEvaluation(waitEvaluationNum);
  };

  return (
    <View className={styles.tabWapperContainer}>
      {/* 展示对应的提示按钮 */}
      {Number(waitSuccessEvaluation) !== 0 && (
        <View className={styles.redDot}>
          <Text>{waitSuccessEvaluation}</Text>
        </View>
      )}
      <AtTabs current={current} tabList={tabList} onClick={(value) => handleClick(value)}>
        <AtTabsPane current={current} index={0}>
          <AssessmentList type={TEST_STATUS.WAITTEST} onDataFetch={updateInfo} />
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          <AssessmentList type={TEST_STATUS.WAITPAY} />
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          <AssessmentList type={TEST_STATUS.FINISH} />
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          <AssessmentList type={TEST_STATUS.OUTOFDATE} />
        </AtTabsPane>
      </AtTabs>
    </View>
  );
};

export default MyAssessment;
